import React, { Component } from 'react'
import '../assets/scss/Account.scss'
import { Tabs, Button, Toast } from 'antd-mobile'
import { EyeInvisibleFill, EyeFill } from 'antd-mobile-icons'
import axios from 'axios'
export default class Account extends Component {
  state = {
    username: '',
    password: '',
    isShow: false
  }
  render() {
    const { push } = this.props.history
    const { username, password, isShow } = this.state
    return (
      <div>
        {/* 头部 */}
        <div className="title">登录或创建一个新帐户 🌟</div>
        {/* tabs 切换 */}
        {/* <div style={{ width: '80%' }}> */}
        {/* <Tabs stretch={false} className="tabs" onChange={(val) => push(val)}> */}
        <Tabs stretch={false} className="tabs">
          <Tabs.Tab title="登录" key="login"></Tabs.Tab>
          <Tabs.Tab title="注册" key="register"></Tabs.Tab>
          <Tabs.Tab title="关于星享俱乐部" key="about"></Tabs.Tab>
        </Tabs>
        {/* </div> */}
        {/* 表单 */}
        <div style={{ background: '#f7f7f7' }}>
          <div className="myinput">
            <input
              type="text"
              placeholder="用户名或者电子邮箱"
              value={username}
              onChange={(e) => this.setState({ username: e.target.value })}
            />
          </div>
          <div className="myinput" style={{ position: 'relative' }}>
            <input
              // 1、通过状态控制 显示文本还是密文
              type={isShow ? 'text' : 'password'}
              placeholder="密码"
              value={password}
              onChange={(e) => this.setState({ password: e.target.value })}
            />
            {/* 3、根据状态 来控制显示小眼睛 */}
            {isShow ? (
              <EyeFill
                fontSize={20}
                style={{ position: 'absolute', top: '50%', right: 10 }}
                // 2、通过点击小眼睛图标 切换密码明文还是密码显示状态 修改state
                onClick={() => this.setState({ isShow: !isShow })}
              />
            ) : (
              <EyeInvisibleFill
                fontSize={20}
                style={{ position: 'absolute', top: '50%', right: 10 }}
                onClick={() => this.setState({ isShow: !isShow })}
              />
            )}
          </div>
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginLeft: '5%',
              marginRight: '5%',
              marginTop: 25
            }}
          >
            <div style={{ display: 'flex', alignItems: 'center' }}>
              {/* <div
                style={{ border: '1px solid #00a862', height: 35, width: 35 }}
              > */}
              <input type="checkbox" style={{ height: 35, width: 35 }} />
              {/* </div> */}
              <span style={{ fontSize: 16, marginLeft: 10 }}>下次自动登录</span>
            </div>
            <div style={{ fontSize: 14, color: '#00a862' }}>忘记密码?</div>
          </div>
        </div>
        {/* 验证码 */}
        <div></div>
        {/* 登录按钮 */}
        <div
          style={{
            textAlign: 'right',
            paddingRight: 15,
            background: '#f7f7f7'
          }}
        >
          <Button shape="rounded" onClick={this.submit}>
            登录
          </Button>
        </div>
      </div>
    )
  }
  submit = () => {
    // 获取表单数据
    console.log(this.state)
    const { username, password } = this.state
    let user = { username, password }
    axios
      .get('http://127.0.0.1:5000/users', user)
      // 请求成功后回调
      .then((res) => {
        console.log(res)
        if (res.data.length > 0) {
          Toast.show({
            icon: 'success',
            content: '登录成功'
          })
        } else {
          Toast.show({
            icon: 'fail',
            content: '登录失败'
          })
        }
      })
      // 请求发送失败后回调
      .catch((err) => {
        console.log(err)
      })
      // 不管请求是否发送成功 最后都会调用
      .then(() => {
        console.log('请求发送完毕')
      })
  }
}
